<template>
	<view>
		<view class="body">
			<u-toast ref="uToast" />
	
			<u-modal v-model="showAdd" title="添加成员" :show-cancel-button="true" :mask-close-able="true" @confirm="addMumbertc">
				<view class="slot-content">
					<u-picker v-model="showMumber" mode="selector" :default-selector="[0]" :range="allMumber"
						range-key="nickname" @confirm="chooseMumber"></u-picker>
	
					<view class="slot-title">请选择添加成员</view>
					<view class="personName" @tap="showMumberM">{{ Anickname }}</view>
	
	
					<view class="slot-title">请输入提成</view>
					<view style="text-align: center;padding: 0 20rpx;">
						<u-input v-model="addMumberMoneny" placeholder="请输入金额" type="number" :border="border" />
					</view>
	
					<!-- <view class="doneBtn">
						<u-button type="primary" @click="addMumber">完成</u-button>
					</view> -->
				</view>
			</u-modal>
			<u-modal v-model="showEdit" title="修改提成" :show-cancel-button="true" :mask-close-able="true" @confirm="EditMumbertc">
				<view class="slot-content">
	
	
					<view class="slot-title">请输入要修改的提成</view>
					<view style="text-align: center;padding: 0 20rpx;">
						<u-input v-model="EditMumberMoneny" placeholder="请输入金额" type="number" :border="border" />
					</view>
	
					<!-- <view class="doneBtn">
						<u-button type="primary" @click="addMumber">完成</u-button>
					</view> -->
				</view>
			</u-modal>
			<view class="pList">
				<view class="pItem-container" v-for="item in comList" :key="item.id">
					<view class="pItem">
						<view class="pInfo">
							<view><u-avatar :src="item.avatar"></u-avatar></view>
							<view>{{ item.username }}</view>
						</view>
						<view class="carrer">
							{{ item.group_name }}
						</view>
						<view class="ptel">
							{{ item.mobile }}
						</view>
						<view class="ticheng">
							提成：￥{{ item.commission_amount }}
						</view>
					</view>
					<view class="czBtn" v-if="item.status == 0">
						<u-button size="mini" style="margin-right:20rpx" @click="editTc(item.id,item.commission_amount)">编辑</u-button>
						<u-button size="mini" type="error" @click="deleteTc(item.id)">删除</u-button>
	
					</view>
					<view class="czBtn" v-else>
						<u-tag text="已结算" type="success" />
					</view>
				</view>
			</view>
			<view class="addBtn">
				<u-button type="success" size="medium" style="width:80px" @click="showAddM">添加成员</u-button>
			</view>
			<view class="comfirmSend">
				<u-button type="primary" size="medium" style="width:100px" @click="comfirmSendM">确认发放</u-button>
			</view>
		</view>
		
	</view>
	

</template>

<script>
var _this;
export default {
	data() {
		return {
			id: '',
			munberid: '',
			editTcid: '',
			addMumberMoneny: '',
			EditMumberMoneny: '',
			Anickname: '请选择添加成员',
			comList: [],
			showAdd: false,
			showMumber: false,
			showEdit: false,
			allMumber: [],
		};
	},
	onLoad(option) {

		this.id = option.id // 订单id

		this.getCommissionList()
		this.getStaffList()
		// this.api_root2 = this.api_root.replace(/\/$/, '');
	},
	methods: {
		comfirmSendM(){
			uni.showModal({
				title: '提示',
				content: '是否确认发放提成？',
				showCancel: true,
				success: ({ confirm, cancel }) => {
					if (confirm) {
						this._post_form('api/ykjp/sell/Sell/settlementCommission', {
							sell_id: this.id
						}, (result) => {
							if (result.code.result == 'success') {

								this.$refs.uToast.show({
									title: '发放成功',
									type: 'success',

								})
								this.getCommissionList()

							}
						});
					}

				}
			})
		},
		editTc(tcid,commission_amount) {
			this.showEdit = true
			this.editTcid = tcid
			this.EditMumberMoneny = commission_amount
		},
		EditMumbertc() {
			if (this.EditMumberMoneny !== '' ) {
				this._post_form('api/ykjp/sell/Sell/editCommission', {
					tcid: this.editTcid,
					commission_amount: this.EditMumberMoneny,
				}, (result) => {
					if (result.code.result == 'success') {

						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',

						})
						this.getCommissionList()

					}


				});

			} else {

				this.$refs.uToast.show({
					title: '请填写信息',
					type: 'error',

				})
			}
		},
		deleteTc(tcid) {
			uni.showModal({
				title: '提示',
				content: '是否删除该成员提成？',
				showCancel: true,
				success: ({ confirm, cancel }) => {
					if (confirm) {
						this._post_form('api/ykjp/sell/Sell/delCommission', {
							tcid: tcid
						}, (result) => {
							if (result.code.result == 'success') {

								this.$refs.uToast.show({
									title: '删除成功',
									type: 'success',

								})
								this.getCommissionList()

							}
						});
					}

				}
			})
		},

		addMumbertc() {

			if (this.addMumberMoneny !== '' && this.Anickname !== '请选择添加成员') {
				this._post_form('api/ykjp/sell/Sell/addCommission', {
					sell_id: this.id,
					employee_id: this.munberid,
					commission_amount: this.addMumberMoneny
				}, (result) => {
					if (result.code.result == 'success') {

						this.$refs.uToast.show({
							title: '添加成功',
							type: 'success',

						})
						this.getCommissionList()

					}


				});

			} else {

				this.$refs.uToast.show({
					title: '请填写信息',
					type: 'error',

				})
			}
		},
		chooseMumber(e) {

			const index = e[0]
			this.munberid = this.allMumber[index].id

			this.Anickname = this.allMumber[index].nickname


		},
		getStaffList() {
			this._post_form('api/User/getStaffList', {}, (result) => {
				console.log('%c [ result ]-32122', 'font-size:13px; background:pink; color:#bf2c9f;', result)
				this.allMumber = result.data.userlist

			});
		},
		showMumberM() {
			this.showMumber = true

		},
		showAddM() {
			console.log('123')
			this.showAdd = true

		},
		addMumber() {
			console.log('321')

		},
		getCommissionList() {
			this._post_form('api/ykjp/sell/Sell/getCommissionList', {
				id: this.id,
			}, (result) => {
				console.log('%c [ result ]-48', 'font-size:13px; background:pink; color:#bf2c9f;', result)
				this.comList = result.data.data

			});
		}
	}
}
</script>

<style lang="scss" scoped>
.body {
	position: relative;
	margin-top: 20rpx;
	padding: 0 20px;
	background-color: #fff;
	height: 100vh;
	.comfirmSend{
		position: absolute;
		bottom: 10%;
    left: 31%;
	}
	.addBtn {
		width: 100%;
		margin-top: 30rpx;

	}

	.slot-content {
		padding: 20rpx;

		.slot-title {

			color: #666;
			margin-top: 20rpx;
			font-size: 16px;
			font-weight: 600;
		}

		.personName {
			color: #c3c3c3;

			padding: 20rpx;
			border-bottom: 1px solid #f2f2f2;
		}

		.doneBtn {
			display: flex;
			margin-top: 20rpx;
		}
	}

	.pList {
		padding-top: 20rpx;

		.pItem-container {
			padding-bottom: 20rpx;
			margin-top: 20rpx;
			border-bottom: 1px solid #f2f2f2;

			.czBtn {
				display: flex;
				width: 100%;
				justify-content: flex-end;
				align-items: flex-end;
			}

			.pItem {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.pInfo {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					u-avatar {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.carrer {
					color: #666;
				}

				.ptel {
					color: #666;
				}

				.ticheng {
					color: #666;
				}
			}
		}

	}
}
</style>
